<template>
  <div class="props-wrap" v-if="currentElementProps.length">
    <el-form>
      <component
        v-for="item in currentElementProps"
        :key="item"
        :is="'attr-sxc-' + item"
        v-bind="currElement.propsValue"
        v-on="updateListeners" />
    </el-form>
  </div>
</template>

<script>
import attrComponents from './index'
import { mapGetters, mapMutations } from 'vuex'
export default {
  components: {
    ...attrComponents
  },
  computed: {
    ...mapGetters('programs', [
      'currElement'
    ]),
    updateListeners() {
      return Object.assign({},
        this.$listeners,
        this.propsListener()
      )
    },
    /**
     * 当前选中元素需要编辑得props 列表
     */
    currentElementProps() {
      if (!this.currElement.propsValue) {
        return []
      }
      if(this.currElement.elName === 'sxc-iframe'){
          delete this.currElement.propsValue.refreshTime;
      }
      if(this.currElement.elName === 'sxc-document'){
          delete this.currElement.propsValue.switchTime;
      }
      let keyList = Object.keys(this.currElement.propsValue);
      const editPropsComponentNameList = Object.keys(attrComponents)
      // 过滤掉找不到对应attr props编辑组件的key
      keyList = keyList.filter(v => {
        return editPropsComponentNameList.includes('attr-sxc-' + v)
      })
      return keyList
    }
  },
  methods: {
    ...mapMutations('programs', ['updatePropValue']),
    propsListener(val) {
      const vm = this
      if (!this.currElement.propsValue) {
        return []
      }
      let keyList = Object.keys(this.currElement.propsValue)
      let _lis = {}
      keyList.forEach(item => {
        _lis['update:' + item] = (value) => {
          let _p = {}
          _p[item] = value
          vm.updatePropValue(_p)
        }
      })
      return _lis
    }
  }
}
</script>

<style lang="scss" scoped>
.props-wrap {
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow-x: hidden;
}
</style>
